<template>
  <div>
    <el-select
      v-if="editable"
      v-model="accountId"
      :multiple="multiple"
      filterable
      :allow-create="allowCreate"
      default-first-option
      @change="selectAccount"
      :placeholder="placeholder">
      <el-option
        v-for="item in options"
        :key="item.bankAccountId"
        :label="item.accountCode"
        :value="item.bankAccountId">
        <span style="float: left">{{ item.accountCode }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.accountName }}</span>
      </el-option>
    </el-select>
    <span v-if="!editable">{{this.account.accountCode}}</span>
  </div>
</template>

<script>
  export default {
    name: "FtBankAccountSelect",
    props: {
      placeholder: {
        type: String,
        default: '请选择用户'
      },
      value: {
        type: String
      },
      editable: {
        type: Boolean,
        default: true
      },
      disabled: {
        type: Boolean,
        default: false
      },
      orgId: {
        type: String
      },
      multiple: {
        type: Boolean,
        default: false
      },
      allowCreate: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        account: {},
        options: [],
        accountId: this.value
      }
    },
    methods: {
      load() {
        if (this.orgId) {
          this.$http.get('/joys-rest/joys-master-data/bank/querys/' + this.orgId).then(resp => {
            this.options = resp.body
          }, resp => {
            this.$message.error(resp.body.message)
          })
        }
      },
      selectAccount() {
        this.$emit('input', this.accountId)
        this.$emit('change', this.account)
      },
      loadAccount() {
        this.account = {}
        if (this.accountId) {
          const url = '/joys-rest/joys-master-data/bank/' + this.accountId
          this.$http.get(url).then(resp => {
            this.account = resp.body
            this.$emit('change', this.account)
          }, resp => {
            this.$message.error(resp.body.message)
          })
        }else {
          this.$emit('change', null)
        }
      },
    },
    watch: {
      orgId() {
        this.load()
      },
      value() {
        this.accountId = this.value
        this.loadAccount()
      }
    }
  }
</script>

<style scoped>

</style>
